import React, { useState } from 'react'
import { ResultPage } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
} from 'antd-mobile'
import dayjs from 'dayjs'
function Index() { 
    const nav = useNavigate()
    const onFinish = (val) => {
        console.log(val)
        nav(`/list?start=${val.start}&end=${val.end}`)
    }

    return (
        <div>
            <ResultPage
                status=''
                title='车票系统'
                description='12306'
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <Form
                    onFinish={onFinish}
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                提交
                            </Button>
                        }
                    > 
                        <Form.Item
                            name='start'
                            label='出发地'
                            rules={[{ required: true, message: '出发地不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入' />
                        </Form.Item>
                        <Form.Item
                            name='end'
                            label='目的地'
                            rules={[{ required: true, message: '目的地不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入目的地' />
                        </Form.Item>
                    </Form>
                </ResultPage.Card>
            </ResultPage>
        </div>
    )
}

export default Index